<template>
    <div class="tabs-page" ref="tabsDiv">
        <div
            class="tabs-page_item"
            v-for="(item, index) in props.options"
            :class="{ active: props.value === item.value }"
            :key="index"
            @click="onItem(item)"
        >
            {{ item.label }}
        </div>
        <div class="tabs-page_bg-item" :style="tabBgStyle"></div>
    </div>
</template>
<script setup>
import { ref, computed } from "vue";

const props = defineProps({
    options: {
        type: Array,
        default: () => [],
    },
    value: {
        default: () => "",
    },
});

const emits = defineEmits(["update:value", "update:change"]);

const tabsDiv = ref(null);
const tabBgStyle = computed(() => {
    if (!tabsDiv.value) return {};
    let _index = props.options.findIndex((v) => v.value === props.value);
    if (_index === -1) return;
    const _width = tabsDiv.value.children[_index].clientWidth;
    const _height = tabsDiv.value.children[_index].clientHeight;
    const _left = tabsDiv.value.children[_index].offsetLeft;
    const _top = tabsDiv.value.children[_index].offsetTop;
    return {
        width: _width + "px",
        height: _height + "px",
        left: _left + "px",
        top: _top + "px",
    };
});

//点击
const onItem = (item) => {
    emits("update:value", item.value);
    emits("update:change", item);
};
</script>
<style lang="less" scoped>
.tabs-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 4px;
    gap: 0 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    .tabs-page_item {
        text-align: center;
        flex: auto;
        line-height: 32px;
        cursor: pointer;
    }
    .tabs-page_bg-item {
        position: absolute;
        background: var(--box-shadow-color);
        transition: all 0.2s ease-in-out;
        border-radius: var(--border-radius);
        pointer-events: none;
    }
}
</style>
